<template>
  <div class="conMain" >
    <el-card  class="box-card" >
        <div slot="header" class="topfix">
            <el-form :inline="true" ref="searchForm"  :model="params" size="small" class="goodsForm"  label-width="100px">
                <el-form-item label="ID" prop="s_id">
                    <el-input v-model="params.s_id"  placeholder="请输入ID" />
                </el-form-item>
                <el-form-item label="登录账号" prop="s_username">
                    <el-input v-model="params.s_username"  placeholder="请输入用户名" />
                </el-form-item>
                <el-form-item label="昵称" prop="s_nickname">
                    <el-input v-model="params.s_nickname"  placeholder="请输入昵称" />
                </el-form-item>
                <el-form-item label="Email" prop="s_email">
                    <el-input v-model="params.s_email"  placeholder="请输入邮箱" />
                </el-form-item>
                <el-form-item label="状态" prop="s_status">
                    <el-select v-model="params.s_status"  placeholder="请选择">
                        <el-option  label="正常" value="normal" />
                        <el-option  label="隐藏" value="hidden" />
                    </el-select>
                </el-form-item>
                <el-form-item label="最后登录时间" prop="s_logintime">
                    <el-date-picker
                        v-model="params.s_logintime"
                        type="daterange"
                        value-format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                    />
                </el-form-item>
                <el-form-item label=" ">
                <el-button type="primary"  size="small" class="searchBtn" @click="handleSearch" icon='el-icon-search'>搜索</el-button>
                <el-button type="info"  @click="handleRet">重置</el-button>
                </el-form-item>
            </el-form>
            <div style="text-align:right;">
              <el-button  v-has="'auth/admin/add'"  type="primary" size="small" class="addBtn" @click="add()" plain><i class="el-icon-plus" /> 添加管理员</el-button>
            </div>
        </div>
        <el-table v-loading="loading"  :data="list" style="width: 100%" :empty-text='emtypetxt'>
            <el-table-column prop="id" label="ID" align="center" width="100" />
            <el-table-column prop="username" label="登录账号" align="center"  min-width="100"  />
            <el-table-column prop="nickname" label="昵称" align="center"  min-width="100"  />
            <el-table-column prop="nickname" label="所属部门" align="center" min-width="100" >
              <template slot-scope="scope">
                <el-tag style="margin-right: 6px;" effect="plain"  type="info" v-for="item in scope.row.groups_text" size="mini">{{item}}</el-tag>

              </template>

            </el-table-column>
            <el-table-column prop="money" label="余额" align="center"/>
            <el-table-column prop="email" label="Email" align="center"/>
            <el-table-column label="状态" align="center">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.status === 'normal'" type="success" size="mini" disable-transitions>正常</el-tag>
                <el-tag v-if="scope.row.status === 'hidden'" type="danger" size="mini" disable-transitions>禁用</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="logintime" label="最后登录时间" align="center" width="200" />

            <el-table-column label="操作" align="center" width="200">
              <template slot-scope="scope" v-if="scope.row.id==admin_id?false:true">
                  <el-link  type="primary" title='编辑' @click="edit(scope.row.id)">编辑</el-link>
                  <el-link  class="ml10" :underline="false" type="warning" title="余额充值" @click="recharge(scope.row)">充值</el-link>
              </template>
            </el-table-column>

        </el-table>
        <div class="pagination">
            <el-pagination
              :current-page="params.page"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="params.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
        </div>
    </el-card>

    <!-- 余额充值 start-->
    <el-dialog :title="'余额充值'" :visible.sync="rechargeVisible" :close-on-click-modal="false" center width="480px">
    	<el-form ref="ruleForm" :model="sub" :rules="rules" label-width="110px">
    		<el-form-item label="充值 id:">
    			<label>{{ sub.id }}</label>
    		</el-form-item>
    		<el-form-item label="充值账号:">
    			<label>{{ sub.username }}</label>
    		</el-form-item>
    		<el-form-item label="充值金额" prop="money">
    			<el-input v-model.number="sub.money" :placeholder="'减少金额可以输入负数'" type="number" />
    		</el-form-item>
        <el-form-item label="备注">
    			<el-input v-model="sub.msg" />
    		</el-form-item>
    	</el-form>
    	<div slot="footer" class="dialog-footer">
    		<el-button @click="rechargeVisible = false">取 消</el-button>
    		<el-button type="primary" @click="subFormRecharge('ruleForm')">确定</el-button>
    	</div>
    </el-dialog>
    <!-- 余额充值 end-->

    <el-dialog :title="sub.id==0?'添加管理员':'编辑管理员'"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    center  width="550px"  v-el-drag-dialog>
      <el-form ref="adminForm" :model="sub" :rules="rules" label-width="110px" class="dialogForm">
        <el-form-item label="所属部门" prop="group">
          <el-select  v-model="sub.group" multiple filterable  placeholder="请选择部门" >
            <el-option
              v-for="(item,index) in groplist"
              :key="index"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="登录账号" prop="username">
          <el-input v-model="sub.username" placeholder="请输入登录账号" :disabled="sub.id==1?true:false"/>
        </el-form-item>
        <el-form-item label="登录密码" prop="password">
          <el-input :placeholder="sub.id==0?'如果为空，则默认123456':'如果为空，则不修改'"  v-model="sub.password" show-password></el-input>
        </el-form-item>

        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="sub.nickname" placeholder="请输入昵称" />
        </el-form-item>
        <el-form-item label="Email" prop="email">
          <el-input v-model="sub.email" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item label="登录失败次数" prop="loginfailure"  v-show="sub.id>1?true:false">
          <el-input v-model.number="sub.loginfailure" placeholder="" />
        </el-form-item>

        <el-form-item label="状态" prop="status" v-show="sub.id==1?false:true">
            <el-radio-group v-model="sub.status"  @change="changeStatus">
              <el-radio label="normal">正常</el-radio>
              <el-radio label="hidden">禁用</el-radio>
            </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="handleCalcel">取 消</el-button>

        <el-button size="medium" type="primary" @click="subForm('adminForm')">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>

import { admin_index,admin_add,admin_add_post,admin_edit,admin_edit_post,admin_del,admin_recharge_post } from '@/api/auth'
import Cookies from 'js-cookie'
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
import ueditorFrom from '@/components/ueditorFrom'

export default {
  components: { ueditorFrom },
  directives: { elDragDialog },
  data() {
    return {
      dialogVisible: false,
      loading:true,
      total:0,
      emtypetxt:'',
      groplist:[],
      list: [],
      rechargeVisible: false,
      params: {
        s_id:'',
        s_username:'',
        s_nickname:'',
        s_email:'',
        s_status:'',
        s_logintime:[],
        page: 1,
        pagesize:10,
        ss_nickname:'like',
        ss_email:'like',
        ss_logintime:'BETWEEN',
      },
      sub:{
        id:0,
        group:[],
        username:'',
        nickname:'',
        email:'',
        password:'',
        status:'normal',
        loginfailure:0,
      },
      rules: {
          group: [
              { required: true, message: '请至少选择一个部门', trigger: 'blur' },
          ],
          username: [
              { required: true, message: '登录账号不能为空', trigger: 'blur' },
              { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
          ],
          nickname: [
              { required: true, message: '昵称不能为空', trigger: 'blur' },
          ],
      },
      admin_id:'',
    }
  },
  created() {
    this.adminlist()
    this.admin_id = Cookies.get('admin_id')
  },
  methods: {
    //列表
    adminlist() {
      this.list=[];
      this.emtypetxt='加载中...';
      this.loading=true;
      admin_index(this.params).then(res => {
        this.list=res.data.list
        this.total=res.data.total
        this.loading = false
        if(this.list.length==0){
          this.emtypetxt='暂无数据'
        }
      })
    },
    //搜索
    handleSearch(){
      this.params.page=1;
      this.adminlist()
    },
    //搜索-重置
    handleRet(){
      this.resetForm('searchForm');
      this.params.page=1
      this.adminlist()
    },
    //搜索-分页
    handleSizeChange(val) {
        this.params.pagesize = val
        this.adminlist()
    },
    //搜索-跳转页
    handleCurrentChange(val) {
        this.params.page = val
        this.adminlist()
    },
    recharge(row) {
      this.sub = {
        id: row.id,
        username: row.username,
        money: ''
      }
      this.rechargeVisible = true
    },
		subFormRecharge(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          admin_recharge_post(this.sub).then(res => {
            this.$message.success(res.msg)
            this.rechargeVisible = false
            this.adminlist()
          })
        } else {
          return false
        }
      })
    },
	
    //添加
    add(){

      this.sub.id=0;
      this.resetForm('adminForm');
      admin_add().then(res => {
        if(res.code==1){
            this.groplist=res.data.group;
            this.dialogVisible=true;
        }
      })
    },
    //编辑
    edit(id){
      this.resetForm('adminForm');
      admin_edit({id:id}).then(res => {
          if(res.code==1){
              this.groplist=res.data.group
              this.sub.group=res.data.mygroup
              let row=res.data.row
              this.sub.id=row.id
              this.sub.username=row.username
              this.sub.nickname=row.nickname
              this.sub.email=row.email
              this.sub.status=row.status
              this.sub.loginfailure=row.loginfailure
              this.dialogVisible=true;
          }
      })
    },
    // 切换状态
    changeStatus(val) {
      this.sub.status = val
    },
    //重置表单
    resetForm(formName)
    {
       if (this.$refs[formName]!==undefined) {
          this.$refs[formName].resetFields();
       }
    },
    // 取消
    handleCalcel() {
      this.dialogVisible = false
    },
    //数据提交
    subForm(formName) {
        this.$refs[formName].validate((valid) => {
            if (valid) {
              if(this.sub.id>0){
                admin_edit_post(this.sub).then(res => {
                    this.$message.success(res.msg);
                    this.dialogVisible = false
                    this.adminlist()
                })
              }else{
                admin_add_post(this.sub).then(res => {
                    this.$message.success(res.msg);
                    this.dialogVisible = false
                    this.adminlist()
                })
              }
            } else {
              return false;
            }
        });
    },
    //数据删除
    del(id){
      let _this=this;
      _this.$modalSure().then(() => {
          admin_del({id:id}).then(res => {
              _this.$message.success(res.msg);
              _this.adminlist()
          })
      })
    },

  },

}
</script>
<style lang="scss" scoped>

</style>
